div {
  .topselection {
    margin-top: 20px;
    text-align: center;
    li {
      list-style: none;
      display: inline-block;
      border: 1px solid rgb(187, 187, 187);
      border-radius: 18px;
      padding: 0;
      height: 32px;
      box-sizing: border-box;
      input {
        text-align: center;
        transform: translate(0, -1px);
        vertical-align: middle;
        height: 32px;
        padding: 0 20px;
        font-size: 14px;
        background-color: rgb(187, 187, 187);
        color: #fff;
        border: none;
        border-radius: 18px;
        outline: none;
      }
      .unselected {
        background: none;
        color: rgb(55, 55, 55);
        &:hover {
          background-color: rgb(244, 244, 244);
          border-radius: 18px;
        }
      }
    }
  }
  .bottompage1 {
    width: 100%;
    // color: red;
    margin-top: 30px;
    .btns-top {
      vertical-align: middle;
      height: 50px;
      .btns-top-left {
        list-style: none;
        display: inline-block;
        a {
          margin-left: 20px;
        }
        .selected {
          color: rgb(55, 55, 55);
          font-weight: bold;
          font-size: 14px;
        }
        .unselected {
          color: rgb(103, 103, 103);
          font-size: 14px;
          &:hover {
            color: rgb(55, 55, 55);
          }
        }
      }
      .btns-top-right {
        list-style: none;
        float: right;
        vertical-align: middle;
        .btn-1 {
          border-radius: 15px;
          color: #fff;
          background-color: rgb(236, 65, 65);
          font-size: 15px;
          padding: 5px 10px;
          margin-right: 10px;
          
        }
        .btn-2 {
          border-radius: 15px;
          border: 1px solid rgb(216, 216, 216);
          color: rgb(55, 55, 55);
          font-size: 15px;
          padding: 5px 10px;
         
        }
      }
    }
    .context {
      .ranklist-one {
        background-color: rgb(249, 249, 249);
        width: 100%;
        padding-left: 20px;
        list-style: none;
        border-radius: 4px;
        height:75px;
        line-height: 75px;
        vertical-align: middle;
        .ranklist-left{
          float: left;
          width: 55%;
          .span1 {
            float: left;
            color: rgb(202, 202, 202);
            // height: 100%;
            text-align: center;
            width: 2em;
          }
          .span2 {
            float:left;
            margin-top: 7.5px;
            position: relative;
            margin-left: 10px;
            img {
              float:left;
              width: 60px;
              height: 60px;
            }
            .icon-bofang{
              color: rgb(236, 65, 65);
              background-color: rgba(254,251,234,0.8);
              border-radius:100% ;
              position: absolute;
              top:30%;
              left:30%;
              width: 40%;
              height: 40%;
              display: block;
            }
          }
          .span3 {
            float:left;
            width: 60%;
            margin-left: 10px;
            height: 75px;
            overflow: hidden;
            display: -webkit-box;
            text-overflow: ellipsis;
            -webkit-line-clamp: 1; /*要显示的行数*/
            -webkit-box-orient: vertical;
            .span3-1{
              color: rgb(54, 54, 54);
              display: inline-block;
            }
            .span3-2{
              color: rgb(155, 155, 155);
              display: inline-block;
            }
          }
        }
        .ranklist-right{
          float: right;
          width: 45%;
        .span4 {
          float:left;
          width: 30%;
          color: rgb(101, 101, 101);
          // height: 100%;
        }
        .span5 {
          float:left;
          width: 50%;
          // height: 100%;
          height: 75px;
          overflow: hidden;
          display: -webkit-box;
          text-overflow: ellipsis;
          -webkit-line-clamp: 1; /*要显示的行数*/
          -webkit-box-orient: vertical;
          .span5-1 {
            color: rgb(101, 101, 101);
            display: inline-block;
          }
          .span5-2 {
            color: rgb(155, 155, 155);
            display: inline-block;
          }
        }
        .span6 {
          float:left;
          width: 20%;
          // height: 100%;
          color: rgb(155, 155, 155);
        }
        }
        clear: both;
        &:nth-last-of-type(2n-1){
          background-color: #fff;
        }
      }
    }
  }
  .bottompage2 {
    width: 100%;
    // color: red;
    margin-top: 30px;
    .btns-top {
      height: 50px;
      .btns-top-left {
        list-style: none;
        display: inline-block;
        a {
          margin-left: 20px;
        }
        .selected {
          color: rgb(55, 55, 55);
          font-weight: bold;
          font-size: 14px;
        }
        .unselected {
          color: rgb(103, 103, 103);
          font-size: 14px;
          &:hover {
            color: rgb(55, 55, 55);
          }
        }
        
      }
      .btns-top-right {
        list-style: none;
        float: right;
        a{
          display: inline-block;
          vertical-align: middle;
          text-align: center;
          padding:0 10px;         
          color: rgb(55, 55, 55);
          font-size: 14px;
          &.selected {
          background-color: rgb(253, 245, 245);
          color: rgb(236, 65, 65);
          border-radius: 15px;
          }
          
        }
        span{
          margin:0 15px;
          display: inline;
          color: rgb(242, 242, 242);
          &:nth-last-of-type(1){
              display: none;
          }
        }
      }
    }
    .context {
      .context-week{
        padding-left: 15px;
        position: relative;
        display: block;
        overflow: hidden;
        .floattag1{
          position:absolute;
          z-index: 1;
          top:5px;
          left: 0;
          // width: 30px;
          // left: 8px;
          color: rgb(55, 55, 55);
          font-size: 16px;
          p{
            line-height: 18px;
          }
        }
      }
      .context-month{
        z-index: 2;
        padding-left: 15px;
        position: relative;
        display: block;
        .floattag2{
          position: absolute;
          left: 0;
          top:5px;
          // left: 8px;
          text-align: center;
          .p-month{
            font-size: 25px;
            color: rgb(55, 55, 55);
            font-weight: bold;
          }
          .p-year{
            font-size: 14px;
            color: rgb(101,101,102);
          }
        }
      }
      .one-album{
        width:155px;
        height: 225px;
        margin-left: 25px;
        position: relative;
        float: left;
        .btn-img{
          padding:0;
          float: left;
          width: 155px;
          height: 140px;
          border-radius: 140px; 
          background: linear-gradient(to bottom,rgb(80,80,80),rgb(22,22,22));
          position: relative;
          
          }
          .shadow-top{
            background: rgb(240, 240, 241);
            opacity:0.3;
            height: 50px;
            width: 6px;
            position: absolute;
            left:140px;
            top:3px;
            
          }
          .shadow-bottom{
            background: rgb(240, 240, 241);
            opacity:0.3;            
            height: 55px;
            width: 6px;
            position: absolute;
            left:140px;
            bottom: 3px;
          }
        .img{
          height: 140px;
          width: 140px;
          position: relative;
          border-radius: 4px;
          img{
            width: 140px;
            height: 140px;
            position: absolute;
            top:0;
            left:0;
          }
          .icon-bofang{
            color: rgb(236, 65, 65);
            background-color: rgba(230,237,240,0.9);
            border-radius:100% ;
            font-size: 28px;
            position: absolute;
            top:30%;
            left:30%;
            width: 40%;
            height: 40%;
            line-height: 60px;
            display: none;
            text-align: center;
            vertical-align: middle;
            // span{
            //   // margin-top: 11px;
            // }
          }
          &:hover{
            .icon-bofang{
              display: inline-block;
            }
          }
        }
        .a-songname{
          color: rgb(55, 55, 55);
          display: block;
          font-size: 12px;
          width: 140px;
          overflow: hidden;
          display: -webkit-box;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2; /*要显示的行数*/
          -webkit-box-orient: vertical;
        }
        .a-artist{
          color:rgb(159,159,159);
          width: 140px;
          display: block;
          font-size: 12px;
          //只显示几行
          overflow: hidden;
          display: -webkit-box;
          text-overflow: ellipsis;
          -webkit-line-clamp: 1; /*要显示的行数*/
          -webkit-box-orient: vertical;
        }
      }
    }
  }
  
span,a{
  overflow: hidden; /*超出部分隐藏*/
  text-overflow: ellipsis;/* 超出部分显示省略号 */
  white-space: nowrap;

}
}
